<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- html() 作用：增加一个元素，覆盖原有的html
			 val() 作用: 针对input元素，实现修改文本框的内容
			 text() 作用：生成文本内容
		 -->
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				border-radius: 5px;
				
			}
			p.2{
				width: 20px;
				height: 20px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<!-- 鼠标点击按钮 下面产生文本 -->
		<button>按钮</button>
		<p>leeeeeeee</p>
		<div>
		</div>
		<p class="2">yyyy</p>
		<input type="button" value="anniu_two"/>
		<input type="text" />
		<script>
			$('button').click(function(){
			// 
				$('p').html('<h1>jq操作DOM</h1>')
			});
			//div 200*200 background 鼠标划过，下边内容修改
			$('div').mousemove(function(){
				$('p.2').html('p','color: red;');
			});
			$('input[type="button"]').click(function(){
				$('input[type="text"]').val('wenbenkang')
			})
		</script>
	</body>
</html>